.mdsvex code:not(pre > code) {
	@apply relative rounded-md bg-magnum-900/50 px-[0.25rem] py-[0.15rem] font-mono text-[0.75rem] text-xs font-semibold leading-7 text-magnum-300;
}

.mdsvex code.neutral {
	@apply bg-neutral-700/50 text-neutral-50;
}

[data-theme*=' '] {
	display: block;
}

[data-rehype-pretty-code-figure] [data-line-numbers] > [data-line]::before {
	@apply text-[11px] text-neutral-400/40;
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	width: 1.25rem;
	margin-right: 0.5rem;
	text-align: center;
}

[data-metadata] [data-code-copy] {
	@apply top-16 !important;
}

[data-rehype-pretty-code-figure] {
	@apply relative !important;

	& pre {
		@apply mb-4 mt-6 flex max-h-[650px] min-h-0 overflow-x-auto  rounded-lg border-x border-b border-neutral-500/50 bg-neutral-950/60 py-4 text-[13px] font-medium;
	}

	& code {
		@apply block min-w-full rounded-none border-0 bg-transparent p-0;
		counter-reset: line;
		box-decoration-break: clone;
	}

	& [data-line] {
		@apply min-h-[1.375rem] w-full border-l-[3px] border-l-transparent px-4;
	}

	& [data-highlighted-line] {
		@apply z-10 w-full border-l-magnum-300 bg-magnum-500/[0.1];
	}

	& [data-chars-id] {
		@apply pb-0.5 shadow-none;
	}

	& [data-line-numbers] [data-line] {
		@apply pr-2;
	}
}

[data-comp-preview] [data-rehype-pretty-code-figure] {
	& pre {
		@apply mt-0 rounded-b-lg rounded-t-none;
	}
}

[data-chars-id='ul'] {
	@apply border-b border-b-magnum-500 font-bold !important;
}

[data-chars-id='hi'] {
	@apply rounded bg-magnum-500/[0.1] p-1 font-bold !important;
}

[data-chars-id='r'] {
	@apply border-b-magnum-600 font-bold !important;
}

[data-chars-id='t'] {
	@apply border-b-magnum-600 font-bold !important;
}

[data-chars-id='c'] {
	@apply border-b-magnum-600 font-bold !important;
}

[data-rehype-pretty-code-title] {
	@apply mt-2 px-4 pt-6 text-sm font-medium;
}

[data-rehype-pretty-code-title] + pre {
	@apply mt-2;
}

[data-callout] > p:last-child {
	@apply mb-0 !important;
}

[data-comp-preview] + p {
	@apply mt-6;
}

[data-metadata]:not(:has(pre)) {
	display: none;
}

code[data-theme*=' '],
code[data-theme*=' '] span {
	color: var(--shiki-light);
	background-color: var(--shiki-light-bg);
}
